<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>水果箱</title>
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/semantic.min.css"/>
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/main.css">
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/common.css">
  <script src="__PUBLIC__/Js/zepto.min.js" type="text/javascript"></script>
  <script src="__PUBLIC__/Js/main.js" type="text/javascript"></script>

  <style type="text/css">
  input[type=text]{border-radius: 0;}
  </style>
 
 </head> 
 <body> 
 <header id="header" style=""> 
    <div class="topbar"> 
     <a href="javascript:history.back();" class="back_btn"><i class="angle left icon"></i></a> 
     <a href="javascript:;" class="top_home"><i class="block layout icon"></i></a> 
     <h1 class="page_title">水果箱</h1> 
    </div> 
    <div class="home_menu" id="hMenu" > 
     <a href="#"><i class="home icon"></i><span>首页</span></a> 
     <a href="#"><i class="star icon"></i><span>兑换商城</span></a> 
     <a href="#"><i class="user icon"></i><span>个人中心</span></a> 
     <a href="#"><i class="shop icon"></i><span>购物车</span></a> 
    </div> 
   </header>
     <script>
       SiteName = "";
       var isApp = Cookie.Get("isApp");
       if (isApp == null || isApp == "") { isApp = 0; }
       if (isApp == 1) { $("#header").hide(); }
       $(".top_home").click(function () {
           var target = $(".home_menu");
           if (target.slideToggle) target.slideToggle();
           else  target.toggle(); });
   </script> 
     <script type="text/javascript">
       var _mvq = window._mvq || [];
       window._mvq = _mvq;
       _mvq.push(['$setAccount', 'm-23995-6']);

       _mvq.push(['$logConversion']);
       (function () {
           var mvl = document.createElement('script');
           mvl.type = 'text/javascript'; mvl.async = true;
           mvl.src = ('https:' == document.location.protocol ? 'https://static-ssl.mediav.com/mvl.js' : 'http://static.mediav.com/mvl.js');
           var s = document.getElementsByTagName('script')[0];
           s.parentNode.insertBefore(mvl, s);
       })();

   </script> 

        <div class="boxthree flag">
          <div class="ui equal width stackable internally celled grid">
                <div class="center aligned  row">
                   <div class="img">
                        <a href="#">
                            <div class="m-r-img">
                                <img class="ui top aligned tiny image" src="__PUBLIC__/Images/pic01.jpg">
                            </div>
                        </a>
                    </div>
                   
                    <div class="hot-info">
                       <div class="hto-p">
                           <h3 class="hto-ph3 m-b-5 f28 m-t-27">商品名称：</h3>
                           <p class="hto-title">订单号码：123456789123456</p>
                           <p class="hto-title">售价：10元</p>
                           <p class="hto-title">数量：1</p>
                       </div>
                    </div>
               </div>
          </div>
          <div class="sbox">  
              <ul>
                  <li>
                    <div class="Spinner">
                      <input type="button" value="-" class="jian" />
                      <span class="shuliang">0</span>
                      <input type="button" value="+" class="jia" />
                    </div><br>
                    <div class="danjia">售价：<span>128元</span></div><br>
                    <div class="zongji">小计：<span>0元</span></div>
                  
                </li>
              </ul>
          </div>
          <div class="or-box">
              <div class="zhifu-info"><span>温习提示</span>：请认真选择购物数量级确认收货地址</div> 
          </div>         


          <div class="order">
              <div class="cart_btn">
                  <div class="field">
                  <div class="f-checked">
                      <label>兑换方式：</label>
                    </div>
                    <div class="f-checked">
                      <input type="radio" name="example2" tabindex="0" class="hidden">
                      <label>金币兑换</label>
                    </div>
                    <div class="f-checked">
                      <input type="radio" name="example2" tabindex="0" class="hidden">
                      <label>金果兑换</label>
                    </div>
                    <div class="f-checked">
                      <input type="radio" name="example2" tabindex="0" class="hidden">
                      <label>果券兑换</label>
                    </div>

                    <div class="cls"></div>
                  </div>
              </div>  

              <div class="or-box">
                  <button class="ui fluid large green submit mini btn">确认提交</button>
              </div>  
              <div class="or-box">
                  <button class="ui fluid large large orange submit mini btn">立即支付</button>
              </div>
          </div> 
          <div class="bbox">
              <a href="index.html">
                  <button class="ui grey basic submit btn ">新增地址</button>
              </a>
          </div>
          <button class="ui grey basic btn note__close seat">删除订单</button>  
    
  </div> 

 <script type="text/javascript">
 $(".note__close").click(function(){
   $(this).parent().fadeOut(500, function(){
     $(this).remove();
   });
 });
 </script> 

  <script>
      var oUl=document.getElementsByTagName('ul')[0];
      var aLi=oUl.getElementsByTagName('li');
      var aEm=document.getElementsByTagName('em');
      var oStrong=document.getElementsByTagName('strong')[0];
      var total=0;
      var countprice=0;
      var max=0;
      for (var i = 0; i < aLi.length; i++) {
          shop(aLi[i]);
      };

      function shop(obj){
          var aInp=obj.getElementsByTagName('input');
          var aSpan=obj.getElementsByTagName('span');
          var num=parseInt(aSpan[0].innerHTML);
          var price=parseFloat(aSpan[1].innerHTML);
          aInp[0].onclick=function(){
              if(num<=0)return;
              num--;
              aSpan[0].innerHTML=num;
              aSpan[2].innerHTML=num*price+'元';
              total--;
              countprice-=price;
              aEm[0].innerHTML=total;
              oStrong.innerHTML=countprice;
              setmax();


          }
          aInp[1].onclick=function(){
              num++;
              aSpan[0].innerHTML=num;
              aSpan[2].innerHTML=num*price+'元';
              total++;
              countprice+=price;
              aEm[0].innerHTML=total;
              oStrong.innerHTML=countprice;
              setmax();
          }

      }
      function setmax(){
          max=0;
         for (var i = 0; i < aLi.length; i++) {
              var aSpan=aLi[i].getElementsByTagName('span');
              if(aSpan[0].innerHTML>0){
                  if(max<parseFloat(aSpan[1].innerHTML)){
                      max=parseFloat(aSpan[1].innerHTML);
                  }
              }
          aEm[1].innerHTML=max;
      }
  }
 </script>
</body>
</html>